<template>
  <section id="produce-info">
      <magic-header v-if="$.env !== 'wxPublic' && $.isApp " titleName="详情"></magic-header>
      <section>
        <h3>{{data.title}}</h3>
        <div class="msg">
          <div class="left">
            <img :src="Logo" alt="">
          </div>
          <div class="middle">
            <div>{{data.shop.name}}</div>
            <div>{{data.publishDate.substring(0,10)}}</div>
          </div>
          <div class="right">
            <div @click="attention" v-if="data.shop.follow === '0'">关注</div>
            <div @click="attention" v-if="data.shop.follow === '' ">关注</div>
            <div @click="cancelAttention" v-if="data.shop.follow === '1'">取消关注</div>
          </div>
        </div>
            <div class="content" v-html="data.content"></div>
            <ul class="produce-list">
              <li v-for='(item,index) in list' :key="index" @click="goBuy(item.id,item.categoryType)">
                <div class="left">
                  <img :src="addPath(item.image)" alt="">
                </div>
                <div class="right">
                  <div class="title">{{item.fullName}}</div>
                  <div class="price">￥{{item.price}}</div>
                </div>
              </li>
            </ul>
        </section>
  </section>
</template>

<script>
import magicHeader from "components/magicHeader";
import panel from "components/panel";
import queryRecommendService from "services/dynamicService/queryRecommend";
import attentionServices from "services/dynamicService/attendion";
import cancelAttentionServices from "services/dynamicService/cancelAttendion";
import Logo from "assets/pic_onemore.png"

export default {
  components: {
    magicHeader,
    panel
  },
  data() {
    return {
      data: '',
      list: [],
      isInApp:false,
      Logo:Logo
    };
  },
  created() {
    if(this.$.isApp){
      this.isInApp = true
    }
    queryRecommendService.bind(this)(
      {
        id: this.$route.query.id
      },
      res => {
        this.data = res;
        if(res.shop.logo){
          this.Logo = this.addPath(res.shop.logo)
        }else{
          this.Logo = Logo
        }
        this.list = res.productList;
        this.data.content = this.data.content.split('src="/upload').join('src="'+this.$.host+'/upload')
      },
      err => {
        console.log(err);
      }
    );
  },
  methods: {
    goBuy(id,type){
      if(!this.isInApp){
        this.$.toast('请下载App体验更多服务')
        this.$router.push({
          name:'down_page'
        })
        return;
      }
      if (type === '1'|| type === '2') {
        this.$router.push({
          name: "sg_goods",
          params: {
            id: id,
            name: "1"
          }
        });
      } else {
        this.$router.push({
          name: "sg_goods_car",
          params: {
            id: id,
            name: "1"
          }
        });
      }
    },
    attention(){
      if(!this.$.userId){
        this.$.goLogin({
          name:'login',
          wechat_download: true
        })
        return;
      }
      attentionServices.bind(this)({
        type:"store",
        refId:this.data.shop.id
      },res =>{
        if(res){
          this.$.toast('关注成功')
          this.data.shop.follow = '1'
        }else{
          this.$.toast('关注失败')
        }
      },err =>{
          this.$.toast('关注失败')
      })
    },
    cancelAttention(){
      cancelAttentionServices.bind(this)({
        type:"store",
        refId:this.data.shop.id
      },res =>{
        if(res){
          this.$.toast('取消关注成功')
          this.data.shop.follow = '0'
        }else{
          this.$.toast('取消关注失败')
        }
      },err =>{
          this.$.toast('取消关注失败')
      })
    }
  }
};
</script>

<style lang="scss">
#produce-info {
  font-size: 14px;
  h3 {
    text-align: center;
    padding: 20px 0;
  }
  .content{
    padding:10px;
    img{
      margin: 2px 0;
      width: calc(100vw - 20px);
    }
  }
  .msg{
    display: flex;
    padding: 10px;
    .left{
      flex: 0 0 50px;
      img{
        width: 50px;
        height: 50px;
      }
    }
    .middle   {
      flex: 1;
      div{
        height: 25px;
        line-height: 25px;
        padding: 0 10px;
      }
    }
    .right{
      color:#F98700;
      flex: 0 0 60px;
      text-align:center;
      line-height: 50px;
    }
  }
  .produce-list {
    li {
      display: flex;
      .left {
        flex: 0 0 100px;
        padding: 10px;
        img{
          width: 100px;
          height: 100px;
        }
      }
      .right {
        flex: 1;
        .title {
          font-size: 14px;
          color:#000;
          padding: 10px;
        }
        .price {
          padding: 10px;
          color:#f02b2b;
          font-size: 14px
        }
      }
    }
  }
}
</style>
